<template>
  <el-table-column :="attrs" :prop="props.prop">
    <template #default="{ row }">
      <template v-if="linkType === TypeEnum.BUTTON">
        <ElButton link :type="props.linkProp && row[props.linkProp] ? 'primary' : 'info'" @click="onClick(row)">
          {{ getValue(row) }}
        </ElButton>
      </template>
      <template v-else>
        <ElLink link :type="props.linkProp && row[props.linkProp] ? 'primary' : 'info'" @click="onClick(row)">
          {{ getValue(row) }}
        </ElLink>
      </template>
    </template>
  </el-table-column>
</template>

<script setup lang="ts">
import {useAttrs} from 'vue'

const attrs = useAttrs()

enum TypeEnum {
  LINK = 'link',
  BUTTON = 'button',
}

interface Props {
  prop: string;
  linkProp?: string;
  linkType?: TypeEnum
}

const props = withDefaults(defineProps<Props>(), {
  linkType: TypeEnum.BUTTON,  // 提供默认值
});
// const props = defineProps<Props>()

const getValue = (row) => {
  return row[props.prop]
}

const onClick = (row) => {
  if (props.linkProp && row[props.linkProp]) {
    window.open(row[props.linkProp], '_blank')
  }
}
</script>
